import React, { useEffect } from 'react'
import { connect } from 'react-redux'
import axios from 'axios'
export const Home = (props) => {
    const { shopList, setShopList } = props
    useEffect(() => {
        axios.get('/list').then(res => {
            setShopList(res.data)
        })
    }, [])
    return (
        <div>
            {shopList.map(item => {
                return <div key={item.id} onClick={() => {
                    props.history.push('/detail/' + item.id)
                }}>
                    <img src={item.image} alt="" />
                    {item.title}
                    <br />
                    {item.price}
                </div>
            })}
        </div>
    )
}

const mapStateToProps = (state) => ({
    ...state
})

const mapDispatchToProps = (dispatch) => {
    return {
        setShopList: (data) => {
            dispatch({ type: "SET_SHOP_LIST", data })
        }
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(Home)
